import React from "react";
import Menu from 'antd/lib/menu';
import Dropdown from 'antd/lib/dropdown';
import DownOutlined from '@ant-design/icons/DownOutlined';
import TableOutlined from '@ant-design/icons/TableOutlined';
import LayoutOutlined from '@ant-design/icons/LayoutOutlined';

const Templates = (props) => {    
    const handleClick0 = () => {
      props.editor.insertText(
        "<style type=\"text/css\">\n" +
        ".visualization-renderer-wrapper,.markdown-visualization-content,.markdown{\n" +
        "  height:100%;\n" +
        "  margin:0;\n" +
        "}\n" +
        ".page{\n" +
        "  position:absolute;\n" +
        "  left:0;\n" +
        "  top:0px;\n" +
        "  right:0;\n" +
        "  bottom:0;\n" +
        "}\n" +
        ".list{\n" +
        "  float:left;\n" +
        "  height:33.3%;\n" +
        "  width:33.3%;\n" +
        "  position:relative;\n" +
        "}\n" +
        ".list:before{\n" +
        "  content:'';\n" +
        "  position:absolute;\n" +
        "  left:10px;\n" +
        "  right:10px;\n" +
        "  top:10px;\n" +
        "  bottom:10px;\n" +
        "  border-radius:10px;\n" +
        "  background-color:#cad5eb;\n" +
        "}\n" +
        ".list:after{\n" +
        "  content:attr(data-index);\n" +
        "  position:absolute;\n" +
        "  height:30px;\n" +
        "  left:0;\n" +
        "  right:0;\n" +
        "  top:0;\n" +
        "  bottom:0;\n" +
        "  margin:auto;\n" +
        "  text-align:center;\n" +
        "  font:24px/30px bold 'microsoft yahei';\n" +
        "}\n" +
        "</style>\n" +
        "<div class=\"page\">\n" +
        "  <div class=\"list\" data-index=\"文本1\"></div>\n" +
        "  <div class=\"list\" data-index=\"文本2\"></div>\n" +
        "  <div class=\"list\" data-index=\"文本3\"></div>\n" +
        "  <div class=\"list\" data-index=\"文本4\"></div>\n" +
        "  <div class=\"list\" data-index=\"文本5\"></div>\n" +
        "  <div class=\"list\" data-index=\"文本6\"></div>\n" +
        "  <div class=\"list\" data-index=\"文本7\"></div>\n" +
        "  <div class=\"list\" data-index=\"文本8\"></div>\n" +
        "  <div class=\"list\" data-index=\"文本9\"></div>\n" +
        "</div>"
      );
    };

    const handleClick1 = () => {
      props.editor.insertText(
        "<style type=\"text/css\">\n" +
        "header {\n" +
        "  background-color:black;\n" +
        "  color:white;\n" +
        "  text-align:center;\n" +
        "  padding:5px;\n" + 
        "}\n" +
        "nav {\n" +
        "  background-color:#eeeeee;\n" +
        "  line-height:30px;\n" +
        "  width:30%;\n" +
        "  float:left;\n" +
        "  padding:5px;\n" +
        "}\n" +
        "section {\n" +
        "  width:70%;\n" +
        "  float:left;\n" +
        "  padding:10px;\n" + 
        "}\n" +
        "footer {\n" +
        "  background-color:black;\n" +
        "  color:white;\n" +
        "  clear:both;\n" +
        "  text-align:center;\n" +
        "  padding:5px;\n" + 
        "}\n" +
        "</style>\n" +
        "<header>\n" +
        "<h1>标题</h1>\n" +
        "</header>\n" +
        "<nav>\n" +
        "菜单1<br>\n" +
        "菜单2<br>\n" +
        "菜单3<br>\n" +
        "</nav>\n" +
        "<section>\n" +
        "<h2>菜单1</h2>\n" +
        "<p>\n" +
        "菜单1的具体内容。\n" +
        "</p>\n" +
        "<p>\n" +
        "菜单1的具体内容。\n" +
        "</p>\n" +
        "</section>\n" +
        "<footer>\n" +
        "脚注\n" +
        "</footer>"
      );
    };

    const handleClick2 = () => {
      props.editor.insertText(
        "<marquee behavior=\"scroll\" direction=\"up\">\n" +
        "  <ul>\n" +
        "    <li>hello，Dazdata BI！</li>\n" +
        "    <li>hello，dazdata.com！</li>\n" +
        "    <li>hello，开源！</li>\n" +
        "    <li>hello，World！</li>\n" +
        "  </ul>\n" +
        "</marquee>"
      );
    };

    const handleClick3 = () => {
      props.editor.insertText(
        "<details>\n" +
        "  <summary>点我展开</summary>\n" +
        "  <p>折叠内容</p>\n" +
        "</details>"
      );
    };
    
    const menu = (
      <Menu>
        <Menu.Item icon={<TableOutlined />}>
          <a rel="noopener noreferrer" onClick={handleClick0}>&nbsp;九宫格布局</a>
        </Menu.Item>
        <Menu.Item icon={<LayoutOutlined />}>
          <a rel="noopener noreferrer" onClick={handleClick1}>&nbsp;栏目导航布局</a>
        </Menu.Item>
        <Menu.Divider />
        <Menu.Item>
          <a rel="noopener noreferrer" onClick={handleClick2}>内容滚动</a>
        </Menu.Item>
        <Menu.Item>
          <a rel="noopener noreferrer" onClick={handleClick3}>内容折叠</a>
        </Menu.Item>
      </Menu>
    );    

    return (
        <Dropdown overlay={menu}>
        <a className="ant-dropdown-link" onClick={e => e.preventDefault()}>
          常用功能 <DownOutlined />
        </a>
        </Dropdown>
    );
}

Templates.align = 'left';
Templates.pluginName = 'templates';

export default Templates;